<template>
  <scroll-view 
    class="order-tab-bar" 
    scroll-x 
    :scroll-into-view="activeId"
  >
    <view 
      v-for="tab in tabs" 
      :id="`tab_${tab.value}`"
      :key="tab.value"
      class="tab-item"
      :class="{active: active === tab.value}"
      @click="$emit('update:active', tab.value)"
    >
      <text>{{tab.label}}</text>
      <view class="indicator" v-if="active === tab.value"></view>
    </view>
  </scroll-view>
</template>

<script setup>
import { computed } from 'vue'
const props= defineProps({
  tabs: {
    type: Array,
    default: () => []
  },
  active: {
    type: String,
    required: true
  }
})

defineEmits(['update:active'])

const activeId = computed(() => `tab_${props.active}`)
</script>

<style lang="scss" scoped>
.order-tab-bar {
  white-space: nowrap;
  background-color: $white-bg;;
  border-bottom: 1rpx solid #f5f5f5;
  
  .tab-item {
    display: inline-block;
    padding: 20rpx 30rpx;
    position: relative;
    
    text {
      font-size: $font-size-28rpx;
      color: $text-color-666;
    }
    
    &.active {
      text {
        color: $primary-color;
        font-weight: bold;
      }
      
      .indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: $primary-color;
        border-radius: 2rpx;
      }
    }
  }
}
</style>